<template>
    <div class="nav">
        <img src="../../static/img/logo2.png" alt="logo">
        <div class="nav-cont">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-submenu index="1">
                    <template slot="title">工作台</template>
                    <el-menu-item index="1-1" class="nav-items-cont">
                        <ul class="nav-ul">
                            <li class="nav-title">基础信息维护</li>
                            <li><router-link to="/index">认证信息维护</router-link></li>
                            <li><router-link to="/index">企业信息维护</router-link></li>
                            <li><router-link to="/index">车辆信息维护</router-link></li>
                            <li><router-link to="/index">场地信息维护</router-link></li>
                            <li><router-link to="/index">司机信息维护</router-link></li>
                        </ul>
                        <ul class="nav-ul">
                            <li class="nav-title">设备信息管理</li>
                            <li><router-link to="/index">出租信息</router-link></li>
                            <li><router-link to="/index">求租信息</router-link></li>
                            <li><router-link to="/index">转让信息</router-link></li>
                            <li><router-link to="/index">求购信息</router-link></li>
                        </ul>
                        <ul class="nav-ul">
                            <li class="nav-title">服务管理</li>
                            <li><router-link to="/index">出租信息</router-link></li>
                            <li><router-link to="/index">求租信息</router-link></li>
                            <li><router-link to="/index">转让信息</router-link></li>
                            <li><router-link to="/index">求购信息</router-link></li>
                        </ul>
                        <ul class="nav-ul">
                            <li class="nav-title">服务管理</li>
                            <li><router-link to="/index">出租信息</router-link></li>
                            <li><router-link to="/index">求租信息</router-link></li>
                            <li><router-link to="/index">转让信息</router-link></li>
                            <li><router-link to="/index">求购信息</router-link></li>
                        </ul>
                        <ul class="nav-ul">
                            <li class="nav-title">内容管理</li>
                            <li><router-link to="/index">出租信息</router-link></li>
                            <li><router-link to="/index">求租信息</router-link></li>
                            <li><router-link to="/index">转让信息</router-link></li>
                            <li><router-link to="/index">求购信息</router-link></li>
                        </ul>
                        <ul class="nav-ul">
                            <li class="nav-title">场地</li>
                            <li><router-link to="/index">出租信息</router-link></li>
                            <li><router-link to="/index">求租信息</router-link></li>
                            <li><router-link to="/index">转让信息</router-link></li>
                            <li><router-link to="/index">求购信息</router-link></li>
                        </ul>
                    </el-menu-item>
                </el-submenu>
                <el-menu-item index="2">处理中心</el-menu-item>
                <el-menu-item index="3">终端监控</el-menu-item>
                <el-menu-item index="4">消息管理</el-menu-item>
            </el-menu>
            <ul>
                <li>sdf</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
  name: "headNav",
  data() {
    return {
      activeIndex: "1"
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style scoped>
.el-menu--horizontal{
    border: 0;
}
.nav-ul{
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}
.nav-ul li{
    width: 100px;
    padding: 0 10px;
    box-sizing: border-box;
    margin: 0;
    font-size: 14px;
    color: #6E6E6E;
    float: left;
}
.nav-title{
    font-size: 14px;
    color: #FEC501 !important;
    font-weight: bold;
}
.nav {
  width: 100%;
  height: 96px;
  background: #fff;
  border-bottom: 1px solid #d5d5d5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
}
.nav-cont{
    display: flex;
    align-items: center
}
</style>


